<template>
  <div class="chat-list-container">
    <!-- 顶部导航栏 -->
    <!-- <div class="chat-list-header">
      <el-button type="text" icon="el-icon-back" @click="goBack">返回</el-button>
      <h2>聊天列表</h2>
    </div> -->

    <!-- 聊天列表 -->
    <div class="chat-list">
      <div
        class="chat-item"
        v-for="(chat, index) in chatList"
        :key="index"
        @click="enterChat(chat.userId)"
      >
        <div class="avatar">
          <el-avatar :src="chat.conversation.avatar" size="medium"></el-avatar>
        </div>
        <div class="chat-info">
          <div class="chat-name">{{ chat.conversation.name }}</div>
          <div class="chat-preview">
            <span class="preview-text" v-text="chat?.lastMessage?.content"></span>
            <span class="preview-time">{{ chat.conversation.createTime }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { chartList } from "@/apis/ws";
import { userInfoStore } from "@/stores/user";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

onMounted(() => getChartList());
// 模拟聊天列表数据
// const chatList = reactive([
//   {
//     id: 1,
//     avatar: "https://cube.elemecdn.com/0/88/03b0d050597aef3874fb2a0b59bjpeg.jpeg",
//     name: "卖家1",
//     preview: "您好，有什么可以帮助您的吗？",
//     time: "10:00",
//   },
//   {
//     id: 2,
//     avatar: "https://cube.elemecdn.com/3/7c/3ea6be330c4a2a39f5113b689041jpeg.jpeg",
//     name: "卖家2",
//     preview: "我们会在您下单后的24小时内发货，请您耐心等待。",
//     time: "10:02",
//   },
//   {
//     id: 3,
//     avatar: "https://cube.elemecdn.com/9/c2/f7827c717be32df5f22f52409266jpeg.jpeg",
//     name: "卖家3",
//     preview: "请问您对商品有什么疑问吗？",
//     time: "10:10",
//   },
//   {
//     id: 4,
//     avatar: "https://cube.elemecdn.com/0/9f/3e9f3ee170a7a5c9e762610b0fjpeg.jpeg",
//     name: "卖家4",
//     preview: "感谢您的购买，祝您生活愉快！",
//     time: "10:15",
//   },
// ]);

const chatList = ref([]);
const userInfo = userInfoStore().userInfo;

const getChartList = async () => {
  const res = await chartList({ userId: userInfo.userId, offset: 0, size: 100 });
  console.log("getChartList ", res);

  chatList.value = res.rows;
};

// 返回上一页
const router = useRouter();
const goBack = () => {
  router.back();
};

// 进入聊天界面
const enterChat = (chatId) => {
  // 跳转到聊天界面
  // router.push({
  //   name: "chartMsg",
  //   params: { id: "1111" },
  // });
  router.push(`/chartMsg/${chatId}`);
};
</script>

<style scoped>
.chat-list-container {
  padding: 20px 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.chat-list-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.chat-list-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  margin-left: 10px;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 15px;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.chat-item:hover {
  background-color: #f5f5f5;
}

.avatar {
  margin-right: 15px;
}

.chat-info {
  flex: 1;
}

.chat-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

.chat-preview {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #999;
}

.preview-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-time {
  margin-left: 10px;
}
</style>
